<template>
  <div id="app">
    <h1>Rendering 10,000 Items with Virtual List</h1>
    <VirtualList :items="items" :item-height="30" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VirtualList from './components/virtual-list/virtual-list.vue'

const items = ref(Array.from({ length: 100000 }, (_, i) => `Item ${i + 1}`))
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
